<template>
    <div>
        <!--查询条件start --111s-->
         <el-card>
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">

            <el-form-item class="query-form-item">
                <el-input v-model="query.enterprisename"
                          placeholder="公司名称"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
                <el-input v-model="query.egalpersonname"
                          placeholder="法人名称"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
                <el-input v-model="query.usermobile"
                          placeholder="联系电话"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-refresh"
                           @click="onRest"></el-button>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--查询条件end-->

        <!--列表start --->
        <el-table ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                  border>
            <el-table-column label="序号" prop="commodityname" width="80" align="center">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="昵称" prop="usernick" align="center" />
            <el-table-column label="法人名称" align="center" prop="egalpersonname" />
            <el-table-column label="公司名称"  :show-overflow-tooltip="true" prop="enterprisename" align="center" />
            <el-table-column label="联系电话" align="center" prop="usermobile" />
            <el-table-column label="操作"  :show-overflow-tooltip="true" prop="enterprisename" align="center" >
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"  @click="handleCompanyForm(scope.row)"> 被服务商城详情</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination class="pagination-container"
                       background
                       :page-size="query.pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :current-page="query.currentPage"
                       :page-sizes="[5,10, 20, 30, 50]"
                       :total="totalNumber"></el-pagination>
        <!--分页模块end-->
        <!--被服务商城详情-->
        <el-dialog
            title="被服务商城详情"
            :visible.sync="entityVisible"
            :before-close="hideEntityForm"
            width="50%"
            top="5vh"
            v-dialogDrag
            :close-on-click-modal="false"
        >
        <template slot="title">
            <div class="avue-crud__dialog__header">
                <span class="el-dialog__title">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                被服务商城详情
                </span>
            </div>
        </template>
        <el-card>
            <el-form >
                <el-form-item label-width="80px" label="基本信息" style="background: #e1e1e1"/>
                <el-form-item label-width="40px">
                    <el-form-item label-width="100px" label="用户名：" style="width:50%;display: inline-block;">
                        <span>{{entityinfo.usernick}}</span>
                    </el-form-item>
                    <el-form-item label="手机号：" style=" margin-left: 20px; width:30%;display: inline-block;">
                        <span>{{entityinfo.usermobile}}</span>
                    </el-form-item>
                </el-form-item>
                <el-form-item label-width="40px">
                    <el-form-item label-width="100px" label="营业执照：" style="width:50%;display: inline-block;">
                        <span>{{entityinfo.enterprisename}}</span>
                    </el-form-item>
                    <el-form-item label="用户业绩：" style=" margin-left: 20px; width:30%;display: inline-block;">
                        <span>{{entityinfo.usertotalintegral}}</span>
                    </el-form-item>
                </el-form-item>
            </el-form>
        </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="hideEntityForm">取消</el-button>
            </div>
        </el-dialog>
        </el-card>
    </div>
</template>
<script>
import {  getSubor } from "../../api/levelAudit/subordinate.js";
    export default {
      data(){
          return{
              query:{
                  enterprisename:"",
                  usermobile:"",
                  egalpersonname:"",
                  currentPage: 1,
                  pageSize: 5,
              },//检索条件
              list:[],//列表数据
              loading:false,//页面加载
              totalNumber:0,//分页数据
              entityVisible:false,//弹窗打开
              entityinfo:{},//弹窗字段



          }

      },

      methods:{
        //获取列表事件
        getList(){
            this.loading = true;
            getSubor(this.query)
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        this.loading = false;
                        return false;
                    }
                    console.log(response.data);
                    this.list = response.data.list || [];
                    this.totalNumber = response.data.totalNumber
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                });  
        },
        //开启弹窗
        handleCompanyForm(val){
            this.entityVisible =true
            this.entityinfo=val ||{}

        },
        onRest(){
            //刷新事件需要重置查询条件
            this.query = {
                currentPage: 1,
                pageSize: 5
            };
            this.getList();
        },//刷新
        onSubmit(){
            this.query.currentPage = 1;
            this.getList();
        },//查询
          
        /*点击页数*/
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.getList();

        },

        /*选择每页条数【10,20,30,40,50】*/
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getList();

        },
        //关闭弹窗
        hideEntityForm(){
            this.entityVisible=false;
        },
      },
      created(){
          this.getList()
      }
    }
</script>